<template>
  <div class="page-container">
    <SideBar class="side-bar"></SideBar>

    <div class="right-container">
      <ToolBar />
      <div class="right-content">
        <router-view />
      </div>
      <Footer />
    </div>
  </div>
</template>
<script>
import SideBar from "@/components/SideBar.vue";
import ToolBar from "@/components/ToolBar.vue";
import Footer from "@/components/Footer.vue";
export default {
  name: "Layout",
  components: { SideBar, ToolBar, Footer },
};
</script>
<style lang="scss">
.page-container {
  display: flex;
  width: 100%;
  min-height: 100%;
  font-family: "Nunito Sans", sans-serif;
  margin: 0;
  background: #14161c;
  font-size: 16px;
  font-weight: 400;
  color: #8a98ac;
  line-height: 1.5;
  .side-bar {
    width: 250px;
  }
  .right-container {
    flex: 1;
    overflow: hidden;
    min-height: 500px;
    transition: all 0.3s ease;
    position: relative;
    .right-content {
      width: 100%;
      padding: 30px;
      margin-top: 71px;
    }
  }
}
</style>
